.alert {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 20px 1fr 20px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: max-content;
  padding: 15px 20px;
  background-color: $lighterGray;
  border: 1px solid $tempLightGray;
  border-radius: $borderRadiusMd;

  .alertIcon {
    color: $darkerGray;
    font-size: $tempFontSizeMedium;
  }

  .alertCloseIcon {
    margin-right: 15px;
    color: $tempLightGray;
    font-size: $tempFontSizeMedium;
    cursor: pointer;
    transition: color .2s ease;
    will-change: color;

    &:hover {
      color: $darkerGray;
    }
  }

  .slotContainer {
    box-sizing: border-box;
    padding: 0 15px;
    color: $darkerGray;
    text-align: left;
  }
}
